<template>
    <a-modal
      :visible="true"
      :title="order ? '修改服务订单' : '添加服务订单'"
      :width="650"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form :model="form" ref="formRef">
        <a-form-item label="需求人姓名" required name="demandPersonName">
          <a-input v-model="form.demandPersonName" />
        </a-form-item>
        <a-form-item label="需求人手机" required name="demandPersonPhone">
          <a-input v-model="form.demandPersonPhone" />
        </a-form-item>
        <a-form-item label="预约时间" required name="reservationTime">
          <a-date-picker v-model="form.reservationTime" show-time />
        </a-form-item>
        <!-- <a-form-item label="联系人省份">
          <a-input v-model="form.contactProvince" />
        </a-form-item>
        <a-form-item label="联系人城市">
          <a-input v-model="form.contactCity" />
        </a-form-item>
        <a-form-item label="联系人县区">
          <a-input v-model="form.contactCounty" />
        </a-form-item>
        <a-form-item label="联系人详细地址">
          <a-input v-model="form.contactAddress" />
        </a-form-item> -->
      </a-form>
    </a-modal>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import { addServiceOrder, updateServiceOrder } from '@/api/serviceOrder';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  
  interface ServiceOrder {
    id?: number;
    demandPersonName: string;
    demandPersonPhone: string;
    reservationTime: string;
    contactProvince: string;
    contactCity: string;
    contactCounty: string;
    contactAddress: string;
  }
  
  export default defineComponent({
    props: {
      order: Object as () => ServiceOrder | null,
    },
    emits: ['submit', 'cancel'],
    setup(props, { emit }) {
      const form = ref<ServiceOrder>({
        id: 0,
        demandPersonName: '',
        demandPersonPhone: '',
        reservationTime: '',
        contactProvince: '',
        contactCity: '',
        contactCounty: '',
        contactAddress: '',
      });
  
      const formRef = ref<FormInstance | null>(null);
  
      watch(
        () => props.order,
        (newOrder) => {
          if (newOrder) {
            form.value = { ...newOrder };
          } else {
            form.value = {
              id: 0,
              demandPersonName: '',
              demandPersonPhone: '',
              reservationTime: '',
              contactProvince: '',
              contactCity: '',
              contactCounty: '',
              contactAddress: '',
            };
          }
        },
        { immediate: true }
      );
  
      const handleOk = async () => {
        if (!formRef.value) return;
  
        try {
          await formRef.value.validate();
          if (props.order) {
            await updateServiceOrder(props.order.id, form.value);
          } else {
            await addServiceOrder(form.value);
          }
          emit('submit');
        } catch (error) {
          console.error('表单校验失败:', error);
        }
      };
  
      const handleCancel = () => {
        emit('cancel');
      };
  
      return {
        form,
        formRef,
        handleOk,
        handleCancel,
      };
    },
  });
  </script>